<template>
	<view class="character">
		<view :class="['monster',status]" @animationend="statusAniEnd">
			<view class="name">{{monster.name}}</view>
			<view class="progress">
				<view class="hp">
					<comp-progress :size="15" activeColor="var(--color-red)" :percent="parseInt(current_hp/max_hp * 100)"></comp-progress>
					<view class="info-text">{{current_hp}} / {{max_hp}}</view>
				</view>
				<view class="rate">
					<comp-progress :size="5" activeColor="#0099cc" :percent="rate"></comp-progress>
				</view>
			</view>
			<view class="skill-animation">
				<comp-frame-animation :skillid="item.skill" v-for="(item,index) in skillData" :key="index"></comp-frame-animation>
			</view>
		</view>
		

		<view class="damageData" v-if="damageData.length > 0">
			<block v-for="(item,index) in damageData">
				<view :class="['text',item.type]" v-if="item.visible" @animationend="wavingBloodEnd(index)">
					{{item.damage}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	
	import { mapState } from "vuex";
	
	import compFrameAnimation from "@/components/comp-frame-animation/comp-frame-animation.vue"
	import compProgress from "@/components/comp-progress/comp-progress.vue"
	export default {
		name: "comp-monster",
		components: {
			compProgress,
			compFrameAnimation
		},
		props : ['monster'],
		computed : {
			...mapState(['player']),
		},
		data() {
			return {
				status: 'idle',
				rate: 0,
				max_hp : 0,
				current_hp : 0,
				damageData : [],
				skillData : []
			};
		},
		mounted() {
			this.status = 'idle';
			this.max_hp = Object.freeze(this.monster.hp);
			this.current_hp = this.monster.hp
			
			this.boundUnderAttack = this.underAttack.bind(this);
			uni.$on('player_attack', this.boundUnderAttack);
			
			//差异化每个怪物速度
			this.speed = parseInt(this.$common.rnd(this.monster.speed * 0.5,this.monster.speed * 1.5))
			
		},
		destroyed() {
			getApp().globalData.common_worker.postMessage({command: 'stop', id: this.monster.uuid});
			uni.$off('player_attack', this.boundUnderAttack)
		},
		methods: {
			setRate() {
				this.rate += this.speed / 100;
				if (this.rate >= 100) {
					this.rate = 0;
					this.attack()
				}
			},
			attack() {
				this.status = 'attack';
				uni.$emit('monster_attack', {
					type: 'normal',
					skill : 0,
					damage: this.$common.rnd(this.monster.min_atk,this.monster.max_atk)
				})
			},
			underAttack(attack){

				if(attack.target == this.monster.uuid){
					
					getApp().globalData.monsters.find(item => item.uuid == attack.target).hp -= attack.damage;
					this.current_hp -= attack.damage;
					
					if(this.current_hp <= 0){
						this.dead()
					}
					
					if (getApp().globalData.appVisibleState == 'onShow') {
						
						let damage_delay = 0;

						if(attack.skill){
							let skill = this.$data_skill.find(item => item.id == attack.skill);
							this.skillData.push(attack)
							damage_delay = skill.damage_delay
						}
						
						setTimeout(() => {
							attack.visible = true;
							this.damageData.push(attack);
						},damage_delay)
						
						
					}
					
				}
			
			},
			dead(){
				this.status = 'dead';
				this.current_hp = 0;
				getApp().globalData.common_worker.postMessage({command: 'stop', id: this.monster.uuid});
				
				uni.$off('player_attack', this.boundUnderAttack)
				this.rate = 0;
				
				
				//经验增加
				let exp =  parseInt((this.monster.min_atk + this.monster.max_atk + this.max_hp + this.monster.speed) / 2);
				
				if(this.player.monster_count >= 8){
					exp = Math.round(exp * 1.5)
				}
				
				let exp_percent =  Math.round(exp * (this.player.attr.exp / 1000));
				exp += exp_percent;
				
				this.$store.commit('player/commit_resource',{
					type : 'exp',
					value : exp
				})
				
				
				uni.$emit('message',{
					content : `<span style="color:var(--color-green)">[战报]</span> 击杀 <span style="color:var(--color-red2)">${this.monster.name}</span> 获得 经验 <span style="color:var(--color-green)">${exp}<span style="font-size:12px;">${exp_percent > 0 ? `(+${exp_percent})` : ''}</span></span>`
				})
				
				//装备掉落
				let drops = this.monster.drop;
				
				let retrieve_equip = [];
				
				for(let i=0;i<drops.length;i++){
					
					
					
					let item_name = drops[i].split('/')[0];
					let item_drop = drops[i].split('/')[1];
					let drop_probability = Math.random();
					
	
					if(drop_probability <= 1/item_drop){

						//制作装备
						let itemDataVolume = this.$common.deep_copy(this.$data_item.find(item => item.name == item_name));
						itemDataVolume['uuid'] = this.$common.create_uuid();
						itemDataVolume['qlty'] = this.$common.probability(this.$config.item_qlty).qlty;
						itemDataVolume['special'] = [];
						
						//赋予品质
						for(let i=1;i<itemDataVolume['qlty'];i++){
							let special_attr = this.$common.probability(this.$config.special_add).attr;
							itemDataVolume['special'].push({name:special_attr,value:this.$common.rnd(Math.round(itemDataVolume.lv/2),itemDataVolume.lv + itemDataVolume.qlty)})
						}
						
						

						if(this.player.bag.length < this.player.bag_count){
							this.$store.commit('player/commit_bag_add',itemDataVolume);
						}else{
							uni.$emit('message',{
								content : `<span style="color:var(--color-yellow)">[系统]</span> <span>背包已满，请立即整理背包！</span>`
							})
						}
	
						
					}
					
					
					
				}
				
				//自动回收
				for(let i=0;i<this.player.bag.length;i++){
					let bag_equip = this.player.bag[i];
					
					for(let j=0;j<4;j++){
						if((bag_equip.qlty - 1) == j && bag_equip.lv <= this.player.retrieve[j]){
							retrieve_equip.push(bag_equip)
						}
					}
				
				}
				
				if(retrieve_equip.length){
					this.$store.commit('player/commit_retrieve',retrieve_equip)
				}
				

				
				if (getApp().globalData.monsters.every(c => c.hp <= 0)) {
					uni.$emit('initbattle');
				}
				
				
			},
			statusAniEnd() {
				if(this.status == 'dead') return;
				this.status = 'idle'
			},
			wavingBloodEnd(index) {
				this.damageData[index].visible = false;
			}
		}
	}
</script>

<style lang="scss">
	.character {
		flex: 1;
		position: relative;
		.skill-animation{
			position: absolute;
			left:0;
			right:0;
			bottom:0;
			top:0;
			display: flex;
		}
		.monster {
			@include character('monster')
		}
	
		@include damageText()
	}
</style>